<template>
  <div>
    <uni-table border stripe emptyText="暂无更多数据">
      <!-- 表头行 -->
      <uni-tr>
        <uni-th
          :key="index"
          align="center"
          v-for="(item, index) in tableHead"
          >{{ item.label }}</uni-th
        >
      </uni-tr>
      <!-- 表格数据行 -->
      <uni-tr v-for="(itemData, indexData) in tableData" :key="indexData">
        <uni-td
          :key="indexHeader"
          align="center"
          v-for="(itemHeader, indexHeader) in tableHead"
        >
          <u-radio-group
            v-model="selectItem"
            placement="column"
            v-if="itemHeader.prop === 'select'"
            :activeColor="$theme.themeColor.primary"
            :key="itemData.id"
          >
            <u-radio
              v-model="selectItem"
              :name="itemData[bindKey]"
              label="选择"
            />
          </u-radio-group>

          <span v-else>{{ itemData[itemHeader.prop] }}</span>
        </uni-td>
      </uni-tr>
    </uni-table>
  </div>
</template>

<script>
export default {
  name: "index",
  props: {
    tableHead: {
      type: Array,
      default: () => [],
    },
    tableData: {
      type: Array,
      default: () => [],
    },
    bindKey: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      selectItem: "",
    };
  },
  watch: {
    selectItem(val) {
      const item = this.tableData.filter((v) => v[this.bindKey] === val)[0];
      this.$emit("onSelect", item);
    },
  },
  methods: {
    setSelectItem(val) {
      this.selectItem = val;
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep.u-radio-group {
  flex-direction: initial;
  justify-content: center;
}
</style>
